The purpose of the HTML tag is to tell the web browsing software that the document it's looking at is indeed an HTML page. Be sure to place <HTML> at the top of every HTML page you create. Similarly, place a </HTML> tag at the bottom of every document.
ﾂ <HEAD>...</HEAD>
The head tag is used to tell the browser what part of the document is the top section, or the head.
ﾂ <TITLE>...</TITLE>
The title contains the text that appears in the title bar of your browser window.
ﾂ <BODY>...</BODY>
The largest part of your HTML document is the body, which contains the content of your document (shown within the display area of your browser window).
attributes: (on all the following, the default colors will be used if omitted)
text - used to set the base color for the normal text within the document
link - used to set a specific color for text links
alink - used to set a specific color for an active link
vlink - used to set a specific color for a visited link
bgcolor - used to set a specific background color
* all the color attributes are set equal to a hexadecimal number equivalent
background - used to specify a graphic file to tiled for the background. If a bgcolor is also
set, the page will appear in that color until the background graphic is loaded.
Formatting
ﾂ <B>...</B> Bold
Used to bold text. Often this reproduces the same effect as the strong emphasis tag.
ﾂ <I>...</I> Italics
Used to italicize text.
<U>...</U> Underline
Used to underline text; not widely supported as underlining typically is associated with links.
ﾂ <TT>...</TT> Typewriter Text
Used for typewriter text, e.g. fixed-width font.
ﾂ <BLINK>...</BLINK> Blinking Text
A somewhat annoying option when overused, all the text that appears between these tags will blink incessantly.
ﾂ <BASEFONT SIZE=x> Base Font Size
Allows you to set the font size of your entire document to be a specified size in relation to what the user has set in their browser. The 'x' would be a number between 1 and 7.
ﾂ <FONT>...</FONT> Font Modification
The font tag makes it possible to make temporary changes in text attributes within the body of your document. A big advantage to this tag is that changes can be made mid-sentence, not forcing a new line break like the heading tag.
attributes:
size - used to change the size of the text. The size can be set as an absolute value or
proportional, i.e. '+' or '-' a certain number. These numbers are between 1 and 7.
color - a newer attribute that (in some browsers) allows you to change the test color. This
is a hexadecimal number or there are also a few names that can be used, i.e. red,
blue, green, etc. This option will be ignored by non-capable browsers.
ﾂ <Hx>...</Hx> Heading
HTML has six levels of headings. The symbol 窶x窶 equals, numbers 1 through 6, with 1 being the most prominent. Headings are displayed in larger and/or bolder fonts than normal body text. The first heading in each document should ideally be tagged <H1>.
attributes:
align - used to align the heading text either left, right or center.
ﾂ <CITE>...</CITE> Citation
Used for titles of books, films, etc. Typically displayed in italics.
ﾂ <CODE>...</CODE> Code
Used for computer code. Displayed in a fixed-width font.
ﾂ <DFN>...</DFN> Definition
Used for emphasizing a definition. No recognizeable change in most browsers.
ﾂ <EM>...</EM> Empasis
Used for emphasis. Typically displayed in italics.
ﾂ <KBD>...</KBD> Keyboard Entry
Used for user keyboard entry. Typically displayed in plain fixed-width font.
ﾂ <XMP>...</XMP> Preformatted - No tags
Preformatted without tags. Handy for showing HTML tags on screen if you are explaining how tags work.
ﾂ <PRE>...</PRE> Preformatted
The <PRE> tag (which stands for "preformatted") generates text in a fixed-width font. This tag also makes spaces, new lines, and tabs significant (multiple spaces are displayed as multiple spaces, and lines break in the same locations as in the source HTML file). This is useful for program listings, among other things.
ﾂ <STRONG>...</STRONG> Strong Emphasis
Used for strong emphasis. Typically displayed in bold.
ﾂ <SAMP>...</SAMP>
Used for a sequence of literal characters. Displayed in a fixed-width font.
ﾂ <VAR>...</VAR> Variable
Used for a variable, where you will replace the variable with specific information. Typically displayed in italics.
ﾂ <ADDRESS>...</ADDRESS> Address
The <ADDRESS> tag is generally used to specify the author of a document, a way to contact the author (e.g., an email address), and a revision date. It is usually the last item in a file.
Alignment
<Hx ALIGN=y></Hx> See previous entry
<P ALIGN=y></P> See entry below
ﾂ <BLOCKQUOTE>...</BLOCKQUOTE> Block Quotation
Use the <BLOCKQUOTE> tag to include lengthy quotations in a separate block on the screen. Most browsers generally indent from both margins for the quotation to separate it from surrounding text.
ﾂ <CENTER>...</CENTER> Center
Allows you to center text and even objects on your screen.
Links & Images
ﾂ <A>...</A> Anchor
The anchor tag gives interactivity to an HTML document. This allows you to create links to other internet pages, doucments and downloadable files. Anything that appears between the begin and end anchor tags will take you to the specified destination when clicked.
attributes:
href - the basic attribute to an anchor tag which tells the destination of the link. This can
specifiy a link within the current document or outside document or file. Outside
links can be absolute (include the full URL including http, mailto etc.) or relative
(within the same folder or directory on the WWW server).
mailto - used within a href reference to create a hyperlink for emailing.
name - used for specifying the location and name of an internal link.
target - if using frames, this specifies what frame or window to load the link into. See the
entry under frames below.
ﾂ <IMG> Image
To include an image in a web document, you need to use an image tag. Make certain the file name ends with 窶.gif窶 or .jpg窶 for GIF or JPEG images. By default, the bottom of an image is aligned with the text. There are numerous attributes for the image tag.
attributes:
src - the basic and necessary element of an image tag which specifies the location of the
image file to be displayed.
width - specifies the width of the image. Optional, but recommended for faster layout of
your page. This can be used to stretch or shrink the display of the image.
height - spedifies the height of the image. Same description as width.
border - specifies a border with (in pixels) when an image is used as a hyperlink. Set the
border width to zero if you want no border to appear. (It is good ettiquite to also
include a text version of the link as well.)
alt - gives an optional text to appear if the person is not loading images or using a
non-graphical browser.
lowsrc - an optional image to load first and faster to give a feel for the page before the
larger image loads. If using this feature, be sure the lowsrc is much smaller!
usemap - if using a client-side image map, this specifies what coding to refer to.
ﾂ <MAP>...</MAP> Client-Side Image Map
A new and very cool feature that allows the use of a graphic as an image map without the use of a CGI program. There are several modifications that need to be made for this tag to work. First you must find the coordinates around the sections to be clickable. Then set up the code to work according to those clickable points. You must also include the USEMAP attribute in the image tag.
attributes:
name - essential attribute giving the code a name to be referenced by for the image tag.
usemap - included with the image tag to specify what coding to refer to.
ﾂ <AREA> Client-Side Image Map (cont'd)
Part of the <MAP> tag; much like the <LI> is to a list. It is with this tag that you specify the different areas that are clickable and where they go.
attributes:
shape - determines the shape of the clickable area being defined; can be rectangle (rect),
polygon (poly), circles (circle), and default (default). Default defines an action
those parts of the image that do not have a shape given.
coords - sets the coordinates of the area. For a rectangle and they are given as "left, top,
right, bottom" and a circle is a defined as a center point and then a radius (a total of
three numbers).
href - same as when in an anchor tag, specifies the action when the area is clicked.
nohref - specifies an area to be non-clickable, or have no action assiciated with it.
Dividers
ﾂ <BR> Line Break
The <BR> tag forces a line break with no extra (white) space between lines.
attribute:
clear - used to discontinue wrapping next to an inline graphic and continue one line below
the graphic. Can be set equal to left, right and center.
ﾂ <P>...</P> Paragraph
Creates a line break and starts a new paragraph. Without <P> tags, the document becomes one large paragraph. The </P> closing tag can be omitted. This is because browsers understand that when they encounter a <P> tag, it implies that there is an end to the previous paragraph.
attributes:
align - for aligning text; can be set equal to left, center or right
ﾂ <HR> Horizontal Rule
The <HR> tag produces a horizontal line the width of the browser window. It's often used as a way to break up information in your document. The WIDTH and SIZE attributes may be used with <HR> individually or together.
attributes:
noshade - forces the line to be solid rather than shadowed or 3-D
width=x - Designates the width of the rule with 'x' equaling the rule窶冱 percentage (or
absolute pixel width) to the size of the browser window.
size=x - Designates the thickness of the rule with 'x' equaling the number of pixels.
ﾂ <NOBR>...</NOBR> No (Line) Break
No break allows you to force text to stay on the same line, much like the PRE tag, but does not start on a new line at the beginning of the tag or force the text to a fixed font. Good for poetry that just must look a certain way.
ﾂ <WBR> Word Break
Used inside of the NOBR tag to specify breaking points, or when to start a new line.
Lists
ﾂ <OL> Ordered List
A numbered list (also called an ordered list, from which the tag name derives) is identical to an unnumbered list, except it uses <OL> instead of <UL>. The items are tagged using the same <LI> tag. These lists can be nested to form an outline format, automatically assigning different numbering formats for the nested lists.
attribute:
type - allows for specification of numbering type; can be set to disc, square or circle
ﾂ <UL>...</UL> Unnumbered (unorganized) List
Makes an unnumbered, bulleted list. Each item in the list appears between the UL tags, and is preceeded by an <LI> tag. These lists can be nested to form an outline format, automatically assigning different symbols for the nested lists.
attribute:
type - allows for specification of bullet type; can be set to disc, square or circle
ﾂ <DL>...</DL> Definition List
A definition list usually consists of alternating a definition term (coded as <DT>) and a definition definition (coded as <DD>). Web browsers generally format the definition on a new line and typically indented.
ﾂ <DIR>...</DIR> Directory List
Not used very much anymore, but acts the same as an unnumbered list. Can be used to help you keep you coding organized.
ﾂ <MENU>...</MENU> Menu List
Not used very much anymore, but acts the same as an unnumbered list. Can be used to help you keep you coding organized.
ﾂ <LI> List Item
The <LI> (list item) tag is followed by the individual item. Each item in a numbered or unnumbered list is preceeded by an <LI> tag. The closing </LI> tag is optional, but not needed.
ﾂ <DT> Definition Term
Used within a definition list (<DL>) to specify the term or stem of the list item. Starts on a new line of text.
ﾂ <DD> Definition Data
Used within a definition list (<DL>) to specify the definition or body of the list item. Usually appears on the following line of text and indented from the left margin.
Tables
ﾂ <TABLE> ... </TABLE> Table
Defines a table in HTML. Tables are very useful for controlling the layout of a page so that it appears exactly as intended.
attributes:
border - to specify a visible border width for a table. A border of 1 pixel width is the
default if you do not specify the width. Use BORDER=0 if you do not want to show a
border.
cellspacing - specify a pixel width for spacing between cells, visible if a border > 1.
cellpadding - specify a pixel width/value for spacing from the cell border and the contents
of the cell.
width - give pixel dimensions or percentage for for the width of the entire table.
ﾂ <CAPTION> ...</CAPTION> Table Caption
Defines the caption for the title of the table. The default position of the title is centered at the top of the table. NOTE: Any kind of markup tag can be used in the caption.
attribute:
align - specify whether the caption appears at the top or bottom of the table
ﾂ <TR> ... </TR> Table Row
Specifies a table row within a table. A table cells and headings will be contained within a table row.
attributes:
align - specify default alignment for the entire row of cells, including left, right, center.
valign - default vertical alignment for the entire row, including top, bottom, middle.
ﾂ <TH> ... </TH> Table Heading
Defines a table header cell. By default the text in this cell is bold and centered. Table header cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes below for more information.
attributes:
align - specify default alignment for the contents of the cell, including left, right, center.
valign - vertical alignment for the contents of the cell, including top, bottom, middle.
width/height - dimensions for the cell; may be in pixel value or percentage of the table.
colspan - specify how many columns for the current cell to span or cross.
rowspan - specify how many rows for the current cell to span or cross.
ﾂ <TD> ... </TD> Table Data (cell)
Defines a table data cell. By default the text in this cell is aligned left and centered vertically. Table data cells may contain other attributes to determine the characteristics of the cell and/or its contents. See Table Attributes below for more information.
attributes:
align - specify default alignment for the contents of the cell, including left, right, center.
valign - vertical alignment for the contents of the cell, including top, bottom, middle.
width/height - dimensions for the cell; may be in pixel value or percentage of the table.
colspan - specify how many columns for the current cell to span or cross.
rowspan - specify how many rows for the current cell to span or cross.
Forms
ﾂ <FORM>...</FORM> Form
The basic element of the form is the <FORM> tag. This begins and closes the area enclosing the form elements. Any HTML coding can be contained within the form area to enhance the look of your form. There are attributes within the form tag that are required to tell your browser where to send the information and how to do it.
attributes:
action - tells your browser what URL to send the information to; this is typically a CGI
program of some kind.
method - there are two options, 'get' or 'post'. The difference is actually somewhat
complicated, but in simple language get encodes all the information into the URL that
is sent and post sends the data separately from the actual call to the script. Which do
you use? Typically you will be using a set program someone else has created, and
they will tell you which one to use. Whew!
ﾂ <INPUT> Input (Variables)
Input is the most common element within the form area. This allows you to specify text input fields, radio buttons, check boxes, selection lists and perhaps more as it is developed.
attributes:
name - specifies the field or variable name; must be included.
value - specifies the default value for the variable when sent to the CGI program. This can
also be specified as "hidden" to send information that you do not want the user seeing.
This text appears within the field and can be deleted and/or replaced by the user.
type - this is where you specify what type input you are looking for, either text, radio,
checkboxes, or selection menus. Be sure to see the coding examples for how to use
these options.
size - when using a text input field, this tells how long it is (width in character's).
maxlength - when using a text input field, specifies how many characters the user is
limited to for their input.
selected - when using a radio field, determines which button is selected by default (be sure
to only select one!)
checked - when using a checkbox field, specifies which box(es) are selected.
ﾂ <TEXTAREA>...</TEXTAREA> Form Text Area
When you are asking a user to input a large amount of text, use the text area element instead of a small one line text input box. You can assign the dimensions of the text area to help determine how much the user types. Text entered between the opening and closing tags will appear within the text area and can be deleted and/or replaced by the user.
attributes:
name - specifies the field or variable name; must be included.
value - specifies the default value for the variable when sent to the CGI program.
rows - determines how long the text area will be (length in text lines).
cols - determines how wide the text area will be (width in character's).
wrap - specifies how you would like the text to wrap within the text area, usually 'virtual'
if you do anything, but optional.
Miscellaneous
ﾂ Frames
You may wonder why frames was not put in a section of its own, like tables or lists. Although popular, frames are memory & bandwidth intensive, and usually not utilized very well. They are new enough that you should take care when using them and always offer a noframe alternitive.
<FRAMESET>...</FRAMESET> Frame Container
This is the main container for a frame. When creating a frame "defining" page, you leave out the BODY tag and use this tag for each frame. These can be nested to create frames within frames, much like a table. Frameset would be comparable to rows or columns in a table.
attributes:
rows - a value that assign how much of the screen each row is allotted, given in fixed
pixels, percentage number or '*' meaning take up the remaining space.
cols - follows same format as rows, only assigns the screen sections horizontally.
<FRAME> Individual Frame
This tag defines a single frame in a frameset. It is not a container so it has no matching end tag.
attributes:
src - defines the source URL tp be displayed in the frame. If omitted a blank space is
displayed in the size of the frame.
name - defines a name for the window. Although this is not displayed, it is useful for
targeting particular windows with links.
marginwidth - gives control of the margin width within a frame, defined in pixels.
marginheight - gives control of the margin height within a frame, defined in pixels.
scrolling - determines whether the frame containes a scroll bar, defined as "yes, no or
auto". Be sure to include if your page may not fit within the frame display area.
noresize - specifies that the user cannot change the size of the frame. There is no value
associated with the tag, it's inclusion only. This is optional and all frames are
resizable by default.
<NOFRAMES>...</NOFRAMES> No Frame Option
Option included on the primary frame document that provides information or alternate page layout for non-frames capable browsers. This is necessity if you are interested in reaching large portions of the web that choose not to use frames capable browsers.
TARGET - Targeting Links Within Frames
This is an option for pointing your links into specific frames. These targets can be contained within the anchor tag, area tag of a client-side image map or within the base tag for an overall default destination. TIP: Before using links, be sure you understand how targeting links and how to make a link fill the whole window when it leaves your site.
values: (set target equal to these within the anchor tag)
"window name" - set the target equal to the name of the window to load into.
"_blank" - will cause the link to always be loaded in a new blank window.
"_self" - causes the link to always load in the same window the anchor was clicked in.
"_parent" - amkes the link load in the immediate FRAMESET parent of this document. This
defaults to acting like "_self" if the document has no parent.
"_top" - makes the link load in the full body of the window. This is how you get out of your
frames when leaving your site!
Other
ﾂ <!-- --> Comments
Allows you to place comments within the code of your HTML document that does not appear when loaded up into a browser. This is handy for placing markers or reminders to yourself in a highly changing document.
ﾂ <META> Meta Indexing
Embedding information for the server. Used for several options, especially for passing indexing information to search engines (both internal and the larger popular ones) and for automatic reloading or reloading to a different URL of your page.
attributes:
http-equiv - set this equal to a URL and time to be reloaded
name - name of the document/HTML file or descriptor for a search engine (such as
description, keywords or author).
content - a short description of the content of the page
